<template>
	<div>
		<div class="alike-lis-header">
			<div class="lis-header-left">
				<div class="add-btn" @click="$router.push({ path: '/dag_cssc/detail' })">+ 新增</div>

				<div class="search-box">
					<el-input
						prefix-icon="el-icon-search"
						v-model="Pagedata.name"
						class="search"
						placeholder=""
						@input="searchChange"
					/>
				</div>
			</div>
		</div>

		<div class="table-data">
			<el-table :data="tableData" style="margin-top:50px;width: 100%">
				<el-table-column prop="name" label="名称">
					<template slot-scope="scope" class="name-load-box">
						<span class="show-loadding" v-show="scope.row.status != 'terminated' && scope.row.status != 'running'">
							<i class="el-icon-loading"></i>
						</span>
						<el-popover placement="right-start" width="260" trigger="hover">
							<div class="breviary clearfix" v-if="scope.row.dataset">
								<p class="breviary-title">数据集</p>
								<p class="breviary-detail">
									{{ scope.row.dataset && scope.row.dataset.name }}
								</p>
							</div>
							<div class="breviary clearfix">
								<p class="breviary-title">基础环境</p>
								<p class="breviary-detail">
									{{ scope.row.image && scope.row.image.name }}<br />
									<span class="sml-font">版本：{{ scope.row.image && scope.row.image.version }}</span>
								</p>
							</div>
							<div class="breviary clearfix" v-if="scope.row.updateUser">
								<p class="breviary-title">更新人</p>
								<p class="breviary-detail">
									{{
										(scope.row.updateUser && scope.row.updateUser.nickName) ||
											(scope.row.updateUse && scope.row.updateUser.username)
									}}
								</p>
							</div>
							<span slot="reference">
								<el-button @click="look(scope.row)" type="text" size="small">
									{{ scope.row.name }}
								</el-button>
							</span>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column prop="status" label="状态">
					<template slot-scope="scope">
						<el-tooltip
							v-if="scope.row.errorMsg"
							class="item"
							effect="dark"
							:content="scope.row.errorMsg"
							placement="top-start"
						>
							<span :class="['statues', scope.row.status]">
								{{ statusMap[scope.row.status] }}
							</span>
						</el-tooltip>
						<span :class="['statues', scope.row.status]" v-else>
							{{ statusMap[scope.row.status] }}
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="productName" label="资源组">
					<template slot-scope="{ row }">
						<p v-if="row.products && row.products.length == 1">
							{{ row.products[0].product }} {{ (row.products[0].price * 6000) / 100 }}元/小时
						</p>
						<div v-if="row.products && row.products.length > 1">
							{{ row.products.length }}组配置
							<el-popover placement="bottom-end" trigger="hover">
								<p>主节点</p>
								<p>
									{{ row.productName }}
									{{
										row.products && row.products[0] && row.products[0].price && (row.products[0].price * 6000) / 100
									}}元/小时
								</p>
								<p v-if="row.slaveList && row.slaveList.length" class="popover-child-title">子节点</p>
								<div v-for="(e, i) in row.slaveList" :key="i" class="slave-list">
									<strong>资源：</strong>{{ e.productName }} {{ (e.price * 6000) / 100 }}元/小时<span
										class="sitting"
									></span>
									<strong>数量：</strong>{{ e.podNum }}
								</div>
								<i class="el-icon-warning" slot="reference"></i>
							</el-popover>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="updateUser" label="更新时间">
					<template slot-scope="scope">
						{{ formatTime(scope.row.updateTime) }}
					</template>
				</el-table-column>
				<el-table-column prop="duration" label="运行时长(分钟)" />
				<!-- <el-table-column
          prop="updateUser"
          align="center"
          minWidth="180px"
          label="更新时间">
            <p slot="header" slot-scope="scope">{{ scope.column }}</p>
          <template slot-scope="scope">
            {{ formatTime(scope.row.updateTime) }}
            duration
          </template>
        </el-table-column> -->

				<el-table-column width="240" label="操作">
					<template slot-scope="scope">
						<div class="table-options">
							<el-button @click="look(scope.row)" type="text" :disabled="!(scope.row.status == 'running')" size="small">
								打开
							</el-button>
							<span class="line"> | </span>

							<el-popconfirm
								title="您确定要停止吗？"
								@onConfirm="stop(scope.row.id)"
								v-if="
									scope.row.status === 'running' ||
										scope.row.status === 'failed' ||
										scope.row.status === 'creating' ||
										scope.row.status === 'queuing' ||
										scope.row.status === 'deploying'
								"
							>
								<el-button type="text" size="small" slot="reference">
									停止
								</el-button>
							</el-popconfirm>

							<el-button
								@click="start(scope.row.id)"
								type="text"
								size="small"
								:disabled="scope.row.status == 'terminating'"
								v-else
							>
								启动
							</el-button>
							<span class="line"> | </span>

							<el-button
								type="text"
								@click="rewrite(scope.row)"
								:disabled="scope.row.status !== 'terminated'"
								size="small"
							>
								修改
							</el-button>
							<span class="line"> | </span>

							<el-popconfirm title="您确定要删除吗？" @onConfirm="del(scope.row.id)">
								<el-button type="text" slot="reference" :disabled="scope.row.status !== 'terminated'" size="small">
									删除
								</el-button>
							</el-popconfirm>
						</div>
					</template>
				</el-table-column>
				<template slot="empty">
					<div class="no-data">
						<p class="no-data-title">没有数据</p>
					</div>
				</template>
			</el-table>
		</div>
		<div class="page-nb-pagination" v-if="Pagedata.total > 10">
			<el-pagination
				layout="prev, pager, next, jumper"
				class="pagination"
				:page-size="Pagedata.pageSize"
				:current-page.sync="Pagedata.pageNum"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:total="Pagedata.total"
			>
			</el-pagination>
		</div>
	</div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { getCanvas, delCanvas, startCanvas, stopCanvas } from "@/api/dag";
// import SaveTask from "../module/save-task-canvas"
// import copyTask from '../module/copyTask.vue'
// import saveImageDialog from './modules/saveImageDialog'
// import saveTaskDialog from './modules/saveTaskDialog'

import { formatTime, isStringifyJSON } from "@/utils/tool";
import { bus } from "@/main";
import { statusMap } from "@/utils/maps";
import { domain } from "@/config";

export default {
	data() {
		return {
			domain,
			search: this.$route.query.childSearch || "",
			// showTypeDialog: false,//  whether to show webide the dialog
			isShowDialog: false,
			isSaveReady: false,
			isDisabled: true,
			isWebide: 3,
			tempData: {},
			tableData: [],
			total: 0,
			page: 1,
			rewData: {},
			canvas_id: "",
			projectId: "",
			isImageShow: false,
			isTaskShow: false,
			statusMap,
			showChart: false,
			projectBox: {},
			popProjectId: this.$route.query.id,
			isNew: "",
			drawer: false,
			drawerId: "",
			drawerMap: [],
			nodeName: "",
			dagMsg: null,
			Pagedata: {
				pageNum: 1,
				pageSize: 12,
				total: 0,
				name: "", // 名称搜索
			},
		};
	},
	props: ["msg"],
	watch: {
		tempData(val) {
			console.log(val.length);
			if (val.length) {
				this.isDisabled = false;
			} else {
				this.isDisabled = true;
			}
		},
		msg: {
			handler(val) {
				console.log("进来了", val);
				this.getData();
			},
		},
	},
	components: {
		// SaveTask,
		// copyTask,
		// saveImageDialog,
		// saveTaskDialog,
	},
	computed: mapState({
		pageNum: (state) => state.menuStore.pageData.pageNum,
		searchValue: (state) => state.menuStore.searchValue,
	}),
	methods: {
		...mapActions(["updatePageNum", "updateSearch"]),
		isShow(data) {
			this.isShowDialog = data.isShow;
			if (data.confirm == "confirm") {
				this.getData();
			}
		},
		exportModle(canvas_id) {
			this.canvas_id = canvas_id;
			this.isShowDialog = true;
		},
		toJk(canvas_id) {
			this.$router.push({
				path: "/platform/notebook/chart",
				query: {
					nid: canvas_id,
					id: this.$route.query.id,
					childSearch: this.search,
				},
			});
		},
		formatTime(str) {
			return formatTime(str, "YYYY-MM-DD HH:mm:ss");
		},
		show(data) {
			this.showChart = data;
			bus.$emit("toHideIntro", false);
		},
		async getData() {
			let res = await getCanvas({ ...this.Pagedata });
			console.log(res);
			this.tableData = res.data.list;

			this.total = res.data.total;
			// this.tableData.forEach((e) => {
			//   // this.tableData[i].updateTime = formatTime(e.updateTime)
			//   console.log(e.updateTime)
			// })
			// let asd = await detailProject({id: this.$route.query.id})
			// console.log(asd)
		},
		searchChange() {
			this.updatePageNum(1);
			this.Pagedata.pageNum = 1;
			this.updateSearch(this.Pagedata.name);
			this.getData();
		},
		handleSizeChange(val) {
			console.log(val);
		},
		handleCurrentChange(val) {
			console.log(val);
			this.Pagedata.pageNum = val;
			this.updatePageNum(val);
			this.getData();
		},
		async stop(id) {
			// let res = await this.$isDel("请确认停止任务");
			// if (res) {
			await stopCanvas({ id });
			// console.log("stop");
			this.getData();
			// }
		},
		async start(id) {
			await startCanvas({ id });
			console.log("start");
			this.getData();
		},
		async del(id) {
			let res = await this.$isDel("任务文件被物理删除且不可恢复，请谨慎操作。");
			if (res) {
				await delCanvas({ id });
				this.$message.success("删除成功");
				this.getData();
			}
		},
		saveImage(data) {
			this.canvas_id = data.id;
			this.isImageShow = true;
		},
		saveTask(data) {
			this.canvas_id = data.id;
			this.isTaskShow = true;
		},
		rewrite(data) {
			this.$router.push({
				path: "/dag/detail",
				query: {
					...this.$route.query,
					canvas_id: data.id,
					childSearch: this.search,
				},
			});
		},
		look(data) {
			this.$router.push({
				path: "/dag/edit",
				query: {
					...this.$route.query,
					canvas_id: data.id,
					childSearch: this.search,
				},
			});
		},
		queryByName() {
			this.page = 1;
			this.getData();
		},
		addBeforeHandler() {
			this.$router.push({
				path: "/dag/detail",
				query: {
					id: this.$route.query.id,
					search: this.$route.query.search,
					isWebide: this.isWebide,
					childSearch: this.search,
				},
			});
		},
		msgFn(e) {
			if (isStringifyJSON(e.data)) {
				let msg = JSON.parse(e.data);
				console.log(msg);
				if (msg.type == "canvas") {
					this.getData();
				}
			}
		},
	},
	created() {
		this.Pagedata = { ...this.Pagedata, pageNum: this.pageNum, name: this.searchValue };
	},
	async mounted() {
		this.getData();
		bus.$on("canvas", (e) => {
			console.log("notebook消息--->", e);
			this.getData();
		});
		bus.$on("canvasinfo", (e) => {
			console.log("notebookInfo消息--->", e);
			this.getData();
		});
		let res = await this.$myInfo(this);
		if (res && res.id) {
			this.dagMsg = new this.$ws({ url: `canvas/ws/imserver/${res.id}` });
			this.dagMsg.initWebSocket(this.msgFn);
		}
	},
	destroyed() {
		bus.$off("canvas");
		bus.$off("canvasinfo");
		this.dagMsg.disconnect();
	},
};
</script>

<style lang="less" scoped>
.layout {
	width: 99%;
	overflow: hidden;
}

.hint {
	margin: 0 16px;
	height: 40px;
	border-radius: 4px;
	border: 1px solid #fed6a7;
	padding: 0 38px;
	line-height: 40px;
	background: url(~@/assets/img/hint-icon.png) no-repeat 14px center #fef4e8;
	background-size: 16px 16px;
	color: #666;
}

.show-loadding {
	float: left;
}

.table-head {
	padding: 8px 16px 0;

	.btn {
		float: left;
	}

	.search {
		float: right;
		width: 254px;
	}
}

.no-data {
	padding: 150px 0;

	.no-data-title {
		line-height: 60px;
		text-align: center;
	}

	.btn {
		margin-top: 40px;
		margin-left: 0;
	}
}

.copy-btn {
	display: inline-block;
}

.statues {
	padding-left: 14px;
}

.el-icon-warning {
	font-size: 16px;
	margin-left: 6px;
}

.popover-child-title {
	margin-top: 10px;
}

.slave-list {
	border-bottom: 1px solid #f1f1f1;
	line-height: 40px;
}

.sitting {
	margin-left: 20px;
}

.check-div {
	min-height: 100px;
	text-align: center;

	.h-b {
		height: 45px;
		padding-top: 20px;
		width: 200px;
	}

	.ck {
		color: #409eff;
		font-weight: 500;
	}
}

.btn-box {
	text-align: right;
	margin-top: 10px;
	margin-left: 20px;
}

.table-options {
	white-space: nowrap !important;
	display: flex !important;
	align-items: center !important;
}
</style>
